<template>
    <div>
        <div style="background-color: #e8eaf6; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #3F51B5;">
            <h3 style="color: #303F9F; margin-top: 0;">🔗 技术解释：多字段侦听器</h3>
            <p><strong>多字段监听：</strong>为firstName和lastName分别设置侦听器，实现对多个相关字段的独立监听。</p>
            <p><strong>数据同步：</strong>当任一字段变化时，通过侦听器手动更新fullName，实现数据的实时同步。</p>
            <p><strong>手动计算 vs 计算属性：</strong>这里使用侦听器手动拼接fullName，对比计算属性的自动计算特性。</p>
            <p><strong>侦听器应用场景：</strong>适用于需要执行副作用操作或复杂逻辑处理的数据变化监听。</p>
        </div>
        <input v-model="firstName" placeholder="First Name" />
        <input v-model="lastName" placeholder="Last Name"/>
        <p>Full Name : {{ fullName }}</p>
    </div>
</template>
<script>
export default{
    data() {
        return {
            firstName:'',
            lastName:'',
            fullName:''
        };
    },
    watch:{
       firstName(newFirstName,oldFirstName){
        this.fullName = newFirstName + ' ' +this.lastName;
       }, 
       lastName(newLastName,oldLastName){
        this.fullName = this.firstName + ' ' + newLastName;
       }
    }
}
</script>